<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <h3>{{$store.state.number}}</h3>
    <button @click="numberAdd">store++</button>
    <br>

    <h3>HomeNumber: {{getHomeNumber}}</h3>
    <button @click="homeNumberAdd">HomeStore++</button>
  </div>
</template>

<script>

import {mapGetters} from "vuex";

export default {
  name: 'Home',
  components: {},
  methods:{
    numberAdd(){
      this.$store.commit('numberAdd');
    },
    homeNumberAdd(){
      this.$store.commit('home/numberAdd')
    }
  },
  computed:{
    ...mapGetters({
      getHomeNumber : 'home/getHomeNumber'
    })
  }
}
</script>
